<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>会员卡详情</span>
                <el-button
                    style="float: right; padding: 3px 0"
                    type="text"
                    @click="goBack"
                >返回
                </el-button
                >
            </div>
            <el-descriptions title="" direction="vertical" :column="5" border size="small">
                <el-descriptions-item label="标题">
                    {{ memberCard.title }}
                </el-descriptions-item>
                <el-descriptions-item label="积分">
                    {{ memberCard.pointsDesc }}
                </el-descriptions-item>
                <el-descriptions-item label="数量">
                    {{ memberCard.quantityDesc }}
                </el-descriptions-item>
                <el-descriptions-item label="储值">
                    {{ memberCard.rechargeDesc }}
                </el-descriptions-item>
                <el-descriptions-item label="会员等级循环天数">
                    {{ memberCard.levelCycleDays }}
                </el-descriptions-item>
                <el-descriptions-item label="背景图片">
                    <div>
                        <el-image
                            style="width: 80px; height: 80px"
                            :src="memberCard.backgroundPicUrl"></el-image>
                    </div>
                </el-descriptions-item>
                <el-descriptions-item label="说明">
                    {{ memberCard.description }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-divider></el-divider>

        <el-tabs v-model="activeName">
            <el-tab-pane label="会员管理" name="member">
                <member :member-card-id="id" size="small"></member>
            </el-tab-pane>
            <el-tab-pane label="会员等级配置" name="level">
                <member-card-level :member-card-id="id" size="small"></member-card-level>
            </el-tab-pane>
            <el-tab-pane label="营销活动配置" name="activity">
                <member-card-activity :member-card-id="id" size="small"></member-card-activity>
            </el-tab-pane>
            <el-tab-pane label="储值规则配置" name="rechargeRule">
                <member-card-recharge-rule :member-card-id="id" size="small"></member-card-recharge-rule>
            </el-tab-pane>
            <el-tab-pane label="关联门店" name="linkShop">
                <el-table
                    id="mainTable"
                    :data="shopData"
                    size="small"
                    header-cell-class-name="tableHeaderStyle"
                    :row-class-name="tableRowClassName">
                    <el-table-column prop="name" label="门店名称"></el-table-column>
                    <el-table-column prop="category" label="门店分类"></el-table-column>
                    <el-table-column prop="city" label="城市"></el-table-column>
                    <el-table-column prop="contactPhone" label="联系电话"></el-table-column>
                    <el-table-column
                        label="操作"
                        fixed="right"
                        width="80px">
                        <template v-slot="scope">
                            <div>
                                <el-button @click="unLinkShop(scope.row)" v-if="scope.row.linkFlag" type="text"
                                           size="small">
                                    解除关联
                                </el-button>
                                <el-button @click="onLinkShop(scope.row)" v-else type="text" size="small">
                                    设置关联
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    small
                    background
                    :hide-on-single-page="true"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="condition.page"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size.sync="condition.rows"
                    layout="sizes, prev, pager, next"
                    :total.sync="condition.total">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="关联公众号小程序" name="linkMp">
                <el-table
                    id="mainTable"
                    :data="mpInfoData"
                    size="small"
                    header-cell-class-name="tableHeaderStyle"
                    :row-class-name="tableRowClassName">
                    <el-table-column prop="name" label="名称"></el-table-column>
                    <el-table-column prop="appId" label="APP_ID"></el-table-column>
                    <el-table-column prop="accountType" label="类型" :formatter="formatAccountType"></el-table-column>
                    <el-table-column prop="principalName" label="主体"></el-table-column>
                    <el-table-column
                        label="操作"
                        fixed="right"
                        align="center"
                        width="80px">
                        <template v-slot="scope">
                            <div>
                                <el-button @click="unLinkMp(scope.row)" v-if="scope.row.linkFlag" type="text"
                                           size="small">
                                    解除关联
                                </el-button>
                                <el-button @click="onLinkMp(scope.row)" v-else type="text" size="small">
                                    设置关联
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import {
    getMemberCardById,
    getMemberCardMpsById,
    getMemberCardShopsById,
    getMpInfoByPage,
    getShopByPage,
    memberCardLinkMp,
    memberCardLinkShop,
    memberCardUnLinkMp,
    memberCardUnLinkShop
} from '@/api/api'
import Member from "@/component/Member";
import MemberCardActivity from "@/component/MemberCardActivity";
import MemberCardLevel from "@/component/MemberCardLevel";
import MemberCardRechargeRule from "@/component/MemberCardRechargeRule";

export default {
    name: "MemberCardDetail",
    components: {Member, MemberCardActivity, MemberCardLevel, MemberCardRechargeRule},
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 10,
                total: 0,
                search: {}
            },
            // 会员卡详情
            memberCard: {},
            // 会员卡ID
            id: '',

            // 门店数据
            shopData: [],
            // 会员卡关联门店数据
            memberCardShopData: [],

            // 公众号小程序数据
            mpInfoData: [],
            // 会员卡关联Mp数据
            memberCardMpData: [],

            activeName: 'member',
        }
    },
    methods: {
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            if (row.linkFlag) {
                return 'success-row';
            }
            return '';
        },
        handleSizeChange(val) {
            this.getShops();
        },
        handleCurrentChange(val) {
            this.getShops();
        },
        formatAccountType: function (row, column, cellValue) {
            if (cellValue == 'OFFICIAL_ACCOUNT') {
                return "公众号";
            } else if (cellValue == 'MINI_PROGRAM') {
                return "小程序";
            } else {
                return "未知";
            }
        },
        // 获取表格数据
        getData: function () {
            getMemberCardById({"id": this.id}).then(data => {
                this.memberCard = data.body;
            });
            this.getShops();
            this.getMps();
        },
        // 获取关联门店列表
        getShops: function () {
            getMemberCardShopsById({"id": this.id}).then(data => {
                this.memberCardShopData = data.body;
                getShopByPage(this.condition).then(data => {
                    this.shopData = data.body.rows;
                    this.condition.total = data.body.total;
                    for (let i = 0; i < this.memberCardShopData.length; i++) {
                        for (let j = 0; j < this.shopData.length; j++) {
                            if (this.memberCardShopData[i].shopId === this.shopData[j].id) {
                                this.shopData[j].linkFlag = true;
                                break;
                            }
                        }
                    }
                });
            });
        },
        // 获取关联公众号/小程序信息
        getMps: function () {
            getMemberCardMpsById({"id": this.id}).then(data => {
                this.memberCardMpData = data.body;
                let param = {};
                param.page = 1;
                param.rows = 100;
                getMpInfoByPage(param).then(data => {
                    this.mpInfoData = data.body.rows;
                    for (let i = 0; i < this.memberCardMpData.length; i++) {
                        for (let j = 0; j < this.mpInfoData.length; j++) {
                            if (this.memberCardMpData[i].mpId === this.mpInfoData[j].id) {
                                this.mpInfoData[j].linkFlag = true;
                                break;
                            }
                        }
                    }
                })
            })
        },
        onLinkShop: function (row) {
            let param = {};
            param.memberCardId = this.id;
            param.shopId = row.id;
            memberCardLinkShop(param).then(data => {
                this.$message({
                    type: 'success',
                    message: '关联成功!'
                });
                this.getShops();
            })
        },
        unLinkShop: function (row) {
            let param = {};
            param.memberCardId = this.id;
            param.shopId = row.id;
            memberCardUnLinkShop(param).then(data => {
                this.$message({
                    type: 'success',
                    message: '解除关联成功!'
                });
                this.getShops();
            })
        },
        onLinkMp: function (row) {
            let param = {};
            param.memberCardId = this.id;
            param.mpId = row.id;
            memberCardLinkMp(param).then(data => {
                if (data.respCode == 1000) {
                    this.$message({
                        type: 'success',
                        message: '关联成功!'
                    });
                    this.getMps();
                }
            })
        },
        unLinkMp: function (row) {
            let param = {};
            param.memberCardId = this.id;
            param.mpId = row.id;
            memberCardUnLinkMp(param).then(data => {
                this.$message({
                    type: 'success',
                    message: '解除关联成功!'
                });
                this.getMps();
            })
        },
        goBack() {
            // 编程式导航
            this.$router.go(-1);
        },
    },
    created() {
        this.id = this.$route.query.id;
        this.getData();
    }
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>
